<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div :style="{ background: 'url(' + require('@/assets/images/broker-cell-bg.png') + ') no-repeat', backgroundSize: 'contain' }" class="broker-item" v-cloak>
        <el-image style="width: 50px; height: 50px;position: absolute;top: 0;left: 20px;" :src="require('@/assets/images/broker.level.' + broker.level + '.png')" ></el-image>
        <el-avatar :size="100" :src="broker.avatar + '?imageView2/5/h/100/w/100'" />
        <div class="name">{{ broker.name }}</div>
        <div class="broker-company">{{ broker.post_title || "" }}</div>
        <!-- <div :style="{ borderColor: btn, color: btn }" class="btn">咨询</div> -->
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
        };
    },
    props: {
        broker: { type: Object, default: null },
    },

    computed: {

        bg: function () {
            return '';
        },

        btn: function () {
            return  "#1989fa";
        },
    },

    methods: {},
};
</script>

<style scoped>
.broker-item {
    height: 320px;
    width: 220px;
    background-size: 240px 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 50px;
    align-items: center;
    margin-right: 20px;
    box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.1);
    /* background: url('@/assets/images/broker-cell-bg.png') no-repeat ; */
    background-size: contain;
    position: relative;
}


.broker-company {

    font-size: 22px;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: scale(0.8);
    margin-bottom: 30px;
    margin-top: 10px;
    width: 100%;
    text-align: center;

}

.broker-item .name {
    margin-top: 16px;
}

.btn {
    border-style: solid;
    border-width: 2px;
    font-size: 24px;

    border-radius: 4px;
    width: 100px;
    text-align: center;
    line-height: 44px;
    height: 44px;
}
</style>
